<template>
    <view class="page">
        <hj-navbar title="学员中心" />
        <scroll-view class="page" :scroll-y="true" :style="scrollStyle">
            <!-- 头像名称信息 -->
            <UserInfo />
            <!-- 邀请码与操作按钮 -->
            <StudentCenter />
            <!-- 底部新闻模块 -->
            <NewsList />
            <!-- 安全底部 -->
            <hj-safe-footer />
        </scroll-view>
    </view>
</template>

<script setup>
/**
 * @description 学员中心
 * @author yinzhi
 * @date 2025-03-18
 */
import { ref, computed, defineComponent } from 'vue'
import { IMAGES_URL } from '@/libs/common/baseUrl.js'
import { useStore } from 'vuex'
const store = useStore()

// 引入组件
import UserInfo from './components/UserInfo.vue'
import StudentCenter from './components/StudentCenter.vue'
import NewsList from './components/NewsList.vue'
defineComponent({
    components: {
        UserInfo,
        StudentCenter,
        NewsList
    }
})

// 导航栏高度
const navBarHeight = computed(() => store.state.platform.systemInfo?.navBarHeight || 0)
// 样式
const scrollStyle = computed(() => {
    return {
        background: `linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url(${IMAGES_URL}home-bg.jpg) no-repeat center`,
        backgroundSize: 'cover',
        height: `calc(100vh - ${navBarHeight.value}px)`
    }
})
</script>

<style scoped lang="scss"></style>
